<!--
 * @Author: your name
 * @Date: 2021-09-13 17:42:48
 * @LastEditTime: 2021-09-14 15:31:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /bigdata-manage-ui/Users/xzx/Desktop/A-xichen/vue-admin-box/src/components/transaction/tradingStrategy.vue
-->
<template>
  <div>
    <el-dialog
      ref="dialog"
      v-model="tradingLayer.show"
      :close-on-click-modal="false"
      :title="tradingLayer.title"
      width="50%"
      center
    >
      <Table
        ref="table"
        v-model:page="page"
        v-loading="loading"
        :showSelection="false"
        :data="tableData"
      >
        <el-table-column prop="id" label="ID" align="center" width="80" />
        <el-table-column prop="status" label="策略类型" align="center">
          <template #default="scope">
            <span class="statusName">{{ scope.row.status === 1 ? "是" : "否" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="权重" align="center" />
        <el-table-column
          :label="$t('message.common.handle')"
          align="center"
        >
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)">{{$t("message.common.set")}}</el-button>
          </template>
        </el-table-column>
      </Table>
    </el-dialog>
    <TradingStrategyDetail v-if="detailType == 1" :tradingLayerDetail="tradingLayerDetail"/>
    <TradingStrategyDetailBack v-if="detailType == 2" :tradingLayerDetail="tradingLayerDetail"/>
  </div>
</template>

<script lang="ts">
import type { Ref } from 'vue'
import { defineComponent, ref, reactive, watch } from 'vue'
import { Page } from "@/components/table/type";
import Table from "@/components/table/index.vue";
import TradingStrategyDetail from "@/components/transaction/tradingStrategyDetail.vue"; // 网格策略与底仓策略详情
import TradingStrategyDetailBack from "@/components/transaction/tradingStrategyDetailBack.vue"; // 回测策略详情


export default defineComponent({
  components: {
    Table,
    TradingStrategyDetail,
    TradingStrategyDetailBack
  },
  props: {
    detailType: {
      type: Number,
      default: 1 // 1:网格策略与底仓策略详情 2:回测策略详情
    },
    tradingLayer: {
      type: Object,
      default: () => {
        return {
          show: false,
          title: '策略详情'
        }
      },
    },
    tableData: {
      type: Array,
      default: () => {
        return [{
          id: 132123,
          status: 1
        }]
      },
    }
  },
  setup(props, ctx) {
    // 策略详情
    const tradingLayerDetail = reactive({
      show: false,
      title: '网格策略详情',
    });
    // table的loading状态
    const loading = ref(false);
    // 分页参数, 供table使用
    const page: Page = reactive({
      index: 1,
      size: 50,
      total: 0
    });
    function confirm() {
      ctx.emit('confirm')
    }
    // 设置策略详情
    const handleEdit = (data: any) => {
      tradingLayerDetail.show = true
      tradingLayerDetail.title = '网格策略详情'
    }
    return {
      loading,
      page,
      tradingLayerDetail,
      handleEdit
    }
  }
})
</script>

<style lang="scss" scoped>
  
</style>